<template>
  <div class="authority-dialog">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入名称" />
      </a-form-model-item>
      <a-form-model-item label="类型" prop="type">
        <a-select v-model="form.type" placeholder="请选择类型">
          <a-select-option :value="-1">
            可扩展
          </a-select-option>
          <a-select-option :value="0">
            不可扩展
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="路径">
        <a-input :disabled="form.type === -1" v-model="form.route" placeholder="请输入路径" />
      </a-form-model-item>
      <a-form-model-item label="父级节点">
        <a-tree-select
          :tree-data="treeData"
          v-model="form.parentId"
          :replaceFields="replaceFields"
          search-placeholder="请选择父级节点"
          :treeDefaultExpandAll="true"
          :getPopupContainer="triggerNode => {
            return triggerNode.parentNode || document.body;
          }"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import orupService from '@/api/orupService'

export default {
  name: 'AuthorityDialog',

  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      form: {
        name: '',
        route: '',
        type: undefined,
        parentId: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        route: [{ required: true, message: '请输入路径', trigger: 'blur' }]
      },
      treeData: [],
      replaceFields: {
        key: 'id',
        title: 'name',
        value: 'id',
        children: 'children'
      }
    }
  },

  props: {
    record: {
      type: Object,
      default: () => ({})
    }
  },

  created () {
    this.loadData()
    this.form = this._.cloneDeep(this.record)
  },

  mounted () {
  },

  methods: {
    async loadData () {
      const params = {
        pageIndex: 0,
        pageSize: 999,
        filterText: '',
        permissionName: ''
      }
      orupService.permissionManageTreeQuery(params).then(res => {
        console.log(res)
        if (res && res.id) {
          this.treeData = this.filterData([res])
        }
      })
    },
    filterData (list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].type === -1) {
          if (list[i].children && list[i].children.length) {
            this.filterData(list[i].children)
          }
        } else {
          list.splice(i, 1)
          i--
        }
      }
      return list
    },
    onSubmit () {
      let isValid = ''
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
.authority-dialog {
  border: 1px solid red;
  /deep/ .ant-input-number {
    width: 375px;
  }
}
</style>
